<template>
    <div id="app">
        <GoodsInput @add="handleAdd" :oldGoodsList="oldGoodsList" @search="handleSearch"/>
        <GoodsTable  @del="handleDel" :goodsList="goodsList" :target="target"/>
    </div>
</template>

<script>
//需求
    //1.渲染表格
    //2.添加数据
    //3.删除数据
    //4.数量增加
    //5.全选和反选
    //6.勾选其他数据，被勾上的数据，全选也要被选中
    //7.总价的计算
    //8.数据的永久存储
    //9.搜索数据
import GoodsInput from "./goodsInput.vue"
import GoodsTable from './goodsTable.vue'
    export default {
        data(){
            return {
                goodsList:[
                    {
                        pic:"",
                        id:1,
                        brand:"坤坤的背带裤",
                        price:"9.9",
                        count:1,
                        caozuo:"del"
                    },
                    {
                        pic:"",
                        id:2,
                        brand:"品如的衣服",
                        price:"19.9",
                        count:2,
                        caozuo:"del"
                    },
                    {
                        pic:"",
                        id:3,
                        brand:"星蝶公主的放大镜",
                        price:"69.9",
                        count:2,
                        caozuo:"del"
                    }
                ],
                target:{
                    // default:"",
                    // type:String
                },
                oldGoodsList:[]
            }
        },
        created(){
            //将goodsList中的选项，拷贝一份
            this.oldGoodsList = [...this.goodsList]
        },
        components: { 
            GoodsInput,
            GoodsTable 
        },
        methods:{
            handleAdd(index){
                console.log(index);
                //将子组件传递来的参数push到list里
                this.goodsList.push(index)
            },
            handleDel(index){
                //删除的时候，获得数据的id，然后checkArr数组中找到对应的数据，将这个数据从checkArr中删掉
                let target = this.goodsList.splice(index,1)
                console.log(target);
                //使用vue.$set将这个target变成响应式数据
                //在组件中使用$set的时候，选项中的data属性需要提前声明
                this.$set(this,"target",target[0])
            },
            handleSearch(index){
                //搜索功能，来接收搜索得到的数据
                this.goodsList = index
            }
        }
    }
</script>

